<template>
  <div class="commentsListe" v-if="commentItem.parent">
    <commentReply :commentItem="newCommentItem.parent" @revert="revert"/>
    <el-row type="flex" align="middle" class="userInfo" justify="space-between">
      <div>
      <span class="userName">{{newCommentItem.parent.account.nickname}}</span>
      <span class="time">2019-11-20 10:39</span>
      </div>
      <div class="number">{{parentLength}}</div>
    </el-row>
    <div style="position: relative;" @mouseover="show" @mouseleave="hidde">
    <div class="content">
      <p>{{newCommentItem.parent.content}}</p>
    </div>
    <div class="demo-image__preview" v-if="!newCommentItem.parent.pics.length == 0">
      <el-image
        style="width: 80px; height: 80px"
        v-for="(element,index) in newCommentItem.parent.pics"
        :src="element.url || ''"
        :preview-src-list="newCommentItem.parent.srcList || []"
        :key="index"
      ></el-image>
    </div>
    <a href="javascript:;" class="huifu" v-show="yingchang" @click="revert(newCommentItem.parent.id,newCommentItem.parent.account.nickname)">回复</a>
    </div>
    <span v-show="false">{{poato}}</span>
  </div>
</template>

<script>
export default {
  name:"commentReply",
  props: {
    commentItem: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      newCommentItem: {
        parent: {
          account: {},
          pics: []
        }
      },
      yingchang:false
    };
  },
  computed: {
    poato() {
      this.commentItem.parent.srcList = [];
      const newsrcList = [];
      this.commentItem.parent.pics.forEach(item => {
        if (!this.commentItem.parent.pics.length) {
          return;
        } else {
          const index = item.url.indexOf("http");
          if (index === -1) {
            item.url = this.$axios.defaults.baseURL + item.url;
          }
          newsrcList.push(item.url);
        }
      });
      this.commentItem.parent.srcList = newsrcList;
      this.newCommentItem = this.commentItem;
      // console.log(this.newCommentItem.srcList);
    },
    parentLength(){
      return this.countParent(0,this.newCommentItem)
    }
  },
  methods:{
    // 回复评论的事件
    revert(id,nickname){
      // console.log("触发深层的回复");
      this.$emit('revert',id,nickname)
      // console.log(id);
      // console.log(nickname);
      
    },
    countParent(num,obj){
      if(obj.parent){
        return this.countParent(num+1,obj.parent)
      }else{
        return num
      }
    },
    show(){
        this.yingchang = true;
    },
    hidde(){
      this.yingchang = false;
    }
  }
};
</script>

<style lang="less" scoped>
.commentsListe {
  border: 1px solid #ddd;
  padding: 5px 10px 0;
  background-color: #f9f9f9;
  .userInfo {
    .userName {
      font-size: 14px;
      color: #68739a;
      padding-right: 10px;
    }
    .time {
      font-size: 12px;
      color: #acbad1;
    }
    .number {
      // width: 410px;
      // text-align: right;
      font-size: 12px;
      color: #999;
    }
  }
  .huifu{
    color:blue;
    font-size: 12px;
    position: absolute;
    // display: none;
    right: 0;
    bottom: 0;
  }
}
.content {
  height: 20px;
  & > p {
    color: #333;
    margin-top: 10px;
  }
}
.demo-image__preview {
  margin: 10px 0;
}
</style>